@layout BlogLayout
@page "/admin/blog/categories/"
@using Blogifier.Shared
@inject HttpClient _http
@inject IStringLocalizer<Resource> _localizer
@inject IJSRuntime _jsruntime
@inject IToaster _toaster
@inject NavigationManager _navigation

<PageTitle Title="@_localizer["categories"]" />

@if (!IsEdit)
{
<div class="section-content">
    <div class="list-toolbar">
        <label class="list-check form-check" data-bs-toggle="tooltip" title="@_localizer["select-all"]">
            <input type="checkbox" @onchange="EventArgs => { CheckAll(EventArgs.Value); }" class="list-check-input form-check-input">
        </label>
        @*<a class="btn btn-blogifier me-3 -add" href="/admin/pages/editor">@_localizer["new-category"]</a>*@
        @if (Categories != null && Categories.Count > 0)
        {
            <div class="dropdown dropdown-flush">
                <button class="btn btn-link dropdown-toggle" type="button" id="dropdownAction" data-bs-toggle="dropdown" aria-expanded="false">
                    @_localizer["actions"]
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownAction">
                    <button type="button" @onclick="(async ()=> await RunAction(GroupAction.Delete))" class="dropdown-item text-danger">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                        </svg>
                        <span>@_localizer["delete"]</span>
                    </button>
                </div>
            </div>
        }
        <button type="button" class="btn btn-link list-search-toggle ms-auto" data-bs-toggle="collapse" data-bs-target="#collapseSearch">
            <svg width="16" height="16" viewBox="0 0 16 16"  fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="@_localizer["search"]">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4765 11.8908C9.4957 12.5892 8.29582 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.29584 12.5892 9.49573 11.8907 10.4766L15.0549 13.6407C15.4454 14.0312 15.4454 14.6644 15.0549 15.0549C14.6644 15.4455 14.0312 15.4455 13.6407 15.0549L10.4765 11.8908ZM11 7C11 9.20914 9.20914 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3C9.20914 3 11 4.79086 11 7Z" />
            </svg>
        </button>
    </div>

    <div class="list-search collapse" id="collapseSearch">
        <input @bind="SearchTerm" @onkeyup="SearchKeyPress" class="list-search-input" type="search">
        <button @onclick="(async () => await SearchCategories())" class="list-search-button" type="button">
            @_localizer["search"]
        </button>
    </div>

    @if (Categories != null && Categories.Count > 0)
    {
        <ul class="list mb-5" aria-label="posts">
            <Virtualize Items="Categories" Context="category">
                <li class="list-item">
                    <label class="list-check form-check" data-bs-toggle="tooltip" title="@_localizer["select"]">
                        <input type="checkbox" @bind="category.Selected" class="list-check-input form-check-input">
                    </label>
                    <a class="list-title -link" href="" @onclick="async ()=> await ShowEdit(category.Id)" @onclick:preventDefault>
                        @category.Category
                    </a>
                    <span class="list-text -nowrap ms-auto">
                        @category.PostCount
                    </span>
                    <a class="list-btn" href="categories/@category.Category" target="_blank" data-bs-toggle="tooltip" title="@_localizer["view"]">
                        <svg class="bi" width="15" height="15" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="@_localizer["view"]">
                            <path d="M7.85724 2.17097L6 4L7 5L8.93201 3.24577C9.89935 2.27845 11.4719 2.27845 12.4393 3.24577C13.4066 4.21308 13.4066 5.78571 12.4393 6.75303L10.5141 8.75674L11.5141 9.75674L13.5141 7.82783C15.0754 6.26652 15.0754 3.73225 13.5141 2.17094C11.9528 0.609657 9.41852 0.609688 7.85724 2.17097Z" />
                            <path d="M3.24575 12.4392C2.2784 11.4719 2.2784 9.89935 3.24575 8.93201L5 7L4 6L2.17098 7.85721C0.609703 9.41849 0.609642 11.9528 2.17098 13.514C3.73226 15.0753 6.26656 15.0753 7.82784 13.514L9.5141 11.7567L8.5141 10.7567L6.75301 12.4392C5.78573 13.4066 4.2131 13.4066 3.24575 12.4392Z" />
                            <path d="M4.99941 9.55426L9.52486 5.02878L10.6563 6.16016L6.13076 10.6856L4.99941 9.55426Z" />
                        </svg>
                    </a>
                </li>
            </Virtualize>
        </ul>
    }
    else
    {
        <div class="list-notfound -crazy">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-smile-upside-down" viewBox="0 0 16 16">
                <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0-1a8 8 0 1 1 0 16A8 8 0 0 1 8 0z" />
                <path d="M4.285 6.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 4.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 3.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 9.5C7 8.672 6.552 8 6 8s-1 .672-1 1.5.448 1.5 1 1.5 1-.672 1-1.5zm4 0c0-.828-.448-1.5-1-1.5s-1 .672-1 1.5.448 1.5 1 1.5 1-.672 1-1.5z" />
            </svg>
            <p>@_localizer["list-is-empty"]</p>
        </div>
    }
</div>
}

@if(IsEdit && CurrentCategory != null)
{
    <h1 class="section-title">@_localizer["edit-category"]</h1>
    <EditForm model="@CurrentCategory" OnValidSubmit="SaveEdit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="section-content -half">
            <div class="form-item">
                <label class="form-label">@_localizer["title"]</label>
                <input type="text" class="form-control" name="title" @bind="CurrentCategory.Content" />
            </div>
            <div class="form-item">
                <label class="form-label">@_localizer["description"]</label>
                <textarea class="form-control" cols="30" rows="5" name="description" @bind="CurrentCategory.Description"></textarea>
            </div>
            <div class="form-item">
                <button type="submit" class="btn btn-blogifier px-5 me-3">@_localizer["save"]</button>
                <button type="button" class="btn btn-default px-4" @onclick="CancelEdit">@_localizer["cancel"]</button>
            </div>
        </div>
    </EditForm>
}

<ToasterComponent @ref="Toaster" />

@code {
   protected ToasterComponent Toaster;
   protected List<CategoryItem> Categories { get; set; }
   protected Category CurrentCategory { get; set; }
   protected string SearchTerm { get; set; }
   protected bool IsEdit = false;

   protected override async Task OnInitializedAsync()
   {
       await Load();
   }

   protected async Task Load()
   {
       Categories = await _http.GetFromJsonAsync<List<CategoryItem>>($"api/category");
   }

   protected async Task ShowEdit(int categoryId)
   {
       CurrentCategory = await _http.GetFromJsonAsync<Category>($"api/category/byId/{categoryId}");
       IsEdit = true;
   }

   protected void CancelEdit()
   {
       CurrentCategory = null;
       IsEdit = false;
   }

   protected async Task SaveEdit()
   {
       Toaster.Toast(await _http.PutAsJsonAsync<Category>("api/category", CurrentCategory));
       CurrentCategory = null;
       IsEdit = false;
       await Load();
   }

   public void CheckAll(object checkValue)
   {
       bool isChecked = (bool)checkValue;
       Categories.ForEach(p => p.Selected = isChecked);
       StateHasChanged();
   }

   public async Task RunAction(GroupAction action)
   {
       string confirm = _localizer["confirm-delete"];
       bool confirmed = false;

       if (action == GroupAction.Delete)
       {
           confirmed = await _jsruntime.InvokeAsync<bool>("confirm", confirm);
           if (!confirmed)
               return;
       }

       foreach (var category in Categories)
       {
           if (category.Selected)
           {
               await _http.DeleteAsync($"api/category/{category.Id}");
           }
       }
       await Load();
   }

   protected async Task SearchKeyPress(KeyboardEventArgs e)
   {
       if (e.Key == "Enter")
           await SearchCategories();
   }

   protected async Task SearchCategories()
   {
       if (string.IsNullOrEmpty(SearchTerm))
           SearchTerm = "*";

       Categories = await _http.GetFromJsonAsync<List<CategoryItem>>($"api/category/{SearchTerm}");
       SearchTerm = "";
   }

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender)
       {
           await _jsruntime.InvokeVoidAsync("commonJsFunctions.setTooltip");
       }
   }
}
